<template>
    <div class="products-page">
      <!-- 面包屑 -->
      <AppBreadcrumb :items="breadcrumbs" />
    
      <div class="container-custom py-8">
        <div class="flex gap-8">
          <!-- 筛选侧边栏 -->
          <aside class="hidden lg:block w-64 flex-shrink-0">
            <ProductFilter v-model="filters" />
          </aside>
        
          <!-- 主内容区 -->
          <div class="flex-1">
            <!-- 工具栏 -->
            <div class="flex items-center justify-between mb-6">
              <div class="text-gray-600">
                找到 <span class="font-medium text-gray-900">{{ total }}</span> 个项目
              </div>
              <div class="flex items-center space-x-4">
                <!-- 排序 -->
                <select 
                  v-model="sortBy"
                  class="input"
                >
                  <option value="latest">最新发布</option>
                  <option value="popular">最受欢迎</option>
                  <option value="price-asc">价格从低到高</option>
                  <option value="price-desc">价格从高到低</option>
                  <option value="rating">评分最高</option>
                </select>
              
                <!-- 移动端筛选按钮 -->
                <button class="lg:hidden btn-primary">
                  筛选
                </button>
              </div>
            </div>
          
            <!-- 产品列表 -->
            <div v-if="pending" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <ProductCardSkeleton v-for="i in 9" :key="i" />
            </div>
          
            <div v-else-if="products.length === 0">
              <Empty description="暂无项目" />
            </div>
          
            <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <ProductCard
                v-for="product in products"
                :key="product.id"
                :product="product"
              />
            </div>
          
            <!-- 分页 -->
            <div v-if="totalPages > 1" class="mt-8">
              <Pagination
                v-model="currentPage"
                :total-pages="totalPages"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import type { Product } from '~/types'
  
  const route = useRoute()
  const router = useRouter()
  
  // 面包屑
  const breadcrumbs = [
    { label: '源码商城', path: '/products' },
  ]
  
  // 筛选条件
  const filters = ref({
    category: route.query.category as string || '',
    tech: route.query.tech as string || '',
    difficulty: route.query.difficulty as string || '',
    priceRange: [0, 10000],
  })
  
  const sortBy = ref((route.query.sort as string) || 'latest')
  const currentPage = ref(Number(route.query.page) || 1)
  
  // 获取产品列表
  const { data: response, pending } = await useFetch('/api/products', {
    query: computed(() => ({
      ...filters.value,
      sort: sortBy.value,
      page: currentPage.value,
      pageSize: 12,
    })),
    watch: [filters, sortBy, currentPage],
  })
  
  const products = computed(() => response.value?.data?.items || []) as any
  const total = computed(() => response.value?.data?.pagination?.total || 0)
  const totalPages = computed(() => response.value?.data?.pagination?.totalPages || 1)
  
  // 监听筛选变化，更新 URL
  watch([filters, sortBy, currentPage], () => {
    router.push({
      query: {
        ...filters.value,
        sort: sortBy.value,
        page: currentPage.value,
      },
    })
  }, { deep: true })
  
  // SEO
  useSeoMeta({
    title: '源码商城 - 代码小库',
    description: '精选优质源代码项目，涵盖前端、后端、全栈、移动端等多个领域',
  })
  </script>